<template>
  <div class="head-bgc">
    <i @click="toggleNavState" :class="['icon', $store.state.navCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold']"></i>
    <nav-tabs />
    <div class="aside-title">后勤管理系统</div>
    <el-dropdown class="right-menu-item" trigger="hover">
      <div class="avatar-wrapper">
        <img src="../assets/img/touxiangguanli@2x.png" class="user-avatar">
        <i class="el-icon-caret-bottom" />
      </div>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>用户名: {{ name }}</el-dropdown-item>
        <el-dropdown-item @click.native="showChange = true">
          <span>修改密码</span>
        </el-dropdown-item>
        <el-dropdown-item @click.native="quit">
          <span>退出登录</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <el-dialog title="修改密码" :visible.sync="showChange" width="550px" style="margin-top:50px" :close-on-click-modal="false"
      :close-on-press-escape="false" :show-close="showClose">
      <el-form label-width="100px">
        <el-form-item label="账号">
          <el-input v-model="form.userName" style="width:360px;" type="text" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="原密码">
          <el-input v-model="form.oldPassWord" style="width:360px;" type="password" show-password
            placeholder="请输入原密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码" style="margin-top:20px">
          <el-input v-model="form.newPassWord" style="width:360px;" type="password" show-password
            placeholder="6位以上,包含大小写字母,数字,特殊符号(除空格)"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" style="margin-top:20px">
          <el-input v-model="form.confirmPassWord" style="width:360px;" type="password" show-password
            placeholder="6位以上,包含大小写字母,数字,特殊符号(除空格)"></el-input>
        </el-form-item>
      </el-form>
      <div class="btnBox">
        <!-- <div class="no" @click="showChange = false">取 消</div> -->
        <div class="yes" @click="changePass">确 认</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import NavTabs from './NavTabs.vue'
import { quit, changePass } from '_api/Login/index.js'
export default {
  components: {
    NavTabs
  },
  data() {
    return {
      form: {
        userName: "",
        oldPassWord: "",
        newPassWord: "",
        confirmPassWord: "",
      },
      showChange: false,
      showClose: false,
      name: "",
      nowPass: ""
    }
  },
  created() {
    this.name = window.localStorage.getItem('name')
    if (window.sessionStorage.getItem('passWord')) {
      this.nowPass = window.sessionStorage.getItem('passWord')
    } else {
      return false
    }
    // ah@123456 验证是否为初始密码
    if (this.nowPass == "ah@123456") {
      this.showChange = true
    } else {
      this.showClose = true
    }
  },
  methods: {
    toggleNavState() {
      // 点击切换导航的折叠状态
      this.$store.commit('TOGGLE_NAV')
    },
    changePass() {
      // 正则
      var reg = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]])[A-Za-z\d`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]]{8,}$/;
      //  test 方法验证
      // console.log(reg.test(this.form.newPassWord));
      // if (!reg.test(this.form.newPassWord)) {
      //   this.$notify.info({
      //     title: '提示',
      //     message: '新密码格式错误!'
      //   });
      //   return false
      // }
      if (this.form.newPassWord != this.form.confirmPassWord) {
        this.$notify.info({
          title: '提示',
          message: '新密码与确认密码不一致!'
        });
        return false
      }
      changePass(this.form).then(res => {
        if (res.data.success == true) {
          this.showChange = false
          this.$message({
            showClose: true,
            message: '修改成功!',
            type: 'success',
            onClose: () => {
              this.$router.push('/login')
              window.localStorage.clear()
            }
          });
        } else {
          this.$message.info(res.data.message)
        }
      })
    },
    quit() {
      this.$confirm('确定退出登录吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.push('/login')
        // window.localStorage.clear()
        window.localStorage.removeItem('firstTime')
        window.localStorage.removeItem('clientRole')
        window.localStorage.removeItem('token')
        window.localStorage.removeItem('campusName')
        window.localStorage.removeItem('menus')
        window.localStorage.removeItem('name')
        window.sessionStorage.clear()
        // quit().then(res => {
        //   // console.log(res, 1212121212)
        //   if (res.status != 200) {
        //     this.$message.info(res.data.message)
        //   }
        //   if (res.status == 200) {
        //     window.localStorage.removeItem('token')
        //   }
        // })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });


    }
  }
}
</script>

<style lang="scss" scoped>
.icon {
  position: absolute;
  top: 14px;
  // color: white;
  color: black;
  // margin-right: 15px;
  font-size: 28px;
  cursor: pointer;
}

#prompt {
  color: red;
  font-size: 12px;
}

.btnBox {
  display: flex;
  width: 240px;
  position: relative;
  left: calc(50% - 120px);
  justify-content: space-around;
  margin-top: 20px;
}

.no {
  cursor: pointer;
  width: 80px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background-color: #f5f5f5;
}

.yes {
  // border-radius: 20px;
  cursor: pointer;
  width: 80px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  // color: white;
  color: black;

  background-color: #3295F6;
}

.right-menu-item {
  position: absolute;
  right: 10px;
  top: 4px;
}

.user-avatar {
  width: 50px;
}

.head-bgc {
  width: 100%;
  height: 100%;
  // background-color: skyblue;
  position: relative;
  // right: 10px;
}

.aside-title {
  text-align: center;
  // color: white;
  color: black;

  font-size: 30px;
  font-weight: bold;
  line-height: 60px;
  position: absolute;
  right: 120px;
  font-family: "宋体";
}

.quit-box {
  display: flex;
  align-items: center;
  position: absolute;
  right: 0;
  bottom: 10px;
}

.quit {
  font-size: 14px;
  display: flex;
  align-items: center;
  font-family: "宋体";
  // position: absolute;
  // right: 0;
  // bottom: 0;
  // color: white;
  color: black;

  cursor: pointer;
}

.user {
  width: 120px;
  float: right;
  margin-top: 5px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
</style>
